<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<style>
	input {
		/*display: block;*/
	    width: 130px;
	    height: 34px;
	    padding: 2px 12px;
	    font-size: 14px;
	    line-height: 1.42857143;
	    color: #555;
	    background-color: #fff;
	    background-image: none;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
</style>
<body>
	<p id="msg"></p>
	<input type="text" id="laozuo">

	<script>
		var msg = '单独的表abc单控件会bcc被自动赋予一些全局样式.mp3';
		// msg = '测试abc的.linux'
		var zip = laozuoZip(msg, 12)
		document.querySelector('#msg').innerHTML = msg
		document.querySelector('#laozuo').value = zip

		function laozuoZip(str, limitSize) {
			// console.log('str', str)
			limitSize = limitSize || str.length / 2
			// console.log('limitSize', limitSize)
			var len = strLength(str)
			// console.log('len', len)
			if(len < limitSize) {
				return str
			}

			var m = Math.floor(limitSize / 2);
			// console.log('m', m)

			var head = []
			var i = 0
			var curlen = 0
			for(;;) {
				isChinese(str, i) ? curlen += 2 : curlen += 1
				head.push(str[i])
				if(curlen >= m)
					break;
				i++
			}
			
			i = 0
			var s = limitSize - curlen
			// console.log('i', i)
			// console.log('s', s)
			curlen = 0
			var tail = []
			while(i <= m) {
				var index=  str.length - i - 1
				tail.unshift(str[index])
				isChinese(str, index) ? curlen += 2 : curlen += 1
				if(curlen >= s)
					break;
				i++
			}

			return head.join('') + '...' + tail.join('');
			
		}

		function strLength(str) {
			var  len = 0
			for(var i = 0; i < str.length; i++) {
				isChinese(str, i) ? len += 2 : len += 1
			}	
			return len
		}


		function isChinese(str, i) {
			return str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94
		}
	</script>
</body>
</html>